<template>
  <div>
    <el-form :model="menu" :rules="rules" ref="menuFrom" label-width="100px">
      <el-form-item label="类型：" prop="type">
        <el-select v-model="menu.type" placeholder="请选择菜单" @change="() => {
          changeSelect(this.menu.type)
        }">
          <el-option v-for="item in selectMenuList" :key="item.id" :label="item.title" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上级菜单：" prop="parentId" v-if="menu.type != 0">
        <el-select v-model="menu.parentId" placeholder="请选择菜单">
          <el-option v-for="item in parentIdList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称：" prop="name">
        <el-input v-model="menu.name"></el-input>
      </el-form-item>
      <el-form-item label="编码：" prop="code">
        <el-input v-model="menu.code"></el-input>
      </el-form-item>
      <el-form-item label="图标：" prop="icon">
        <el-select v-model="menu.icon" placeholder="请选择">
          <div class="selectData">
            <el-option v-for="item in icons.iconList" :key="item" :label="item" :value="item">
              <i :class="item" style="width: 20px;height: 20px;color: black;"></i>
            </el-option>
          </div>
        </el-select>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input v-model="menu.sort"></el-input>
      </el-form-item>
      <el-form-item label="是否请用：">
        <el-radio-group v-model="menu.status">
          <el-radio :label="0">启用</el-radio>
          <el-radio :label="1">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注：">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="menu.remarks"></el-input>
      </el-form-item>
      <el-form-item class="buttomData">
        <el-button type="primary" @click="onSubmit('menuFrom')">提交</el-button>
        <el-button @click="clonsForm()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import icons from "./icons.json";
import { addPermissionInfo, addPermissionParentList, updatePermissionInfo } from '@/api/menu';
export default {
  name: "MenuDetail",
  props: {
    isAdd: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      default: () => { }
    },
  },
  data() {
    return {
      menu: {
        name: '',
        parentId: '',
        code: '',
        icon: '',
        status: 0,
        sort: 1,
        remarks: '',
        type: 0
      },
      selectMenuList: [
        { id: 0, title: '一级菜单' },
        { id: 1, title: '二级菜单' },
        { id: 2, title: '三级菜单' },
      ],
      parentIdList: [],
      rules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        parentId: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
      },
      icons: icons
    }
  },
  mounted() {
    if (this.rowData.id && this.rowData.id != '') {
      this.menu = this.rowData;
    } else {
      this.menu = {
        name: '',
        parentId: '',
        code: '',
        icon: '',
        status: 0,
        sort: 1,
        remarks: '',
        type: 0
      };
    }

    this.changeSelect(this.menu.type);
  },
  methods: {
    // 下拉框选择
    changeSelect(type) {
      addPermissionParentList(type).then(response => {
        if (response.code == 200) {
          this.parentIdList = response.data;
        }
      })
    },
    // 确认按钮
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (!this.isAdd) {
              let par = {
                id: this.menu.id,
                name: this.menu.name,
                code: this.menu.code,
                remarks: this.menu.remarks,
                parentId: this.menu.parentId,
                status: this.menu.status,
                loginId: JSON.parse(localStorage.getItem('userInfo')).id,
                icon: this.menu.icon,
                sort: this.menu.sort
              }
              updatePermissionInfo(par).then(response => {
                if (response.code == 200) {
                  this.$message({
                    message: '修改成功',
                    type: 'success',
                    duration: 1000
                  });
                  this.$emit('onSubmit');
                }
              });
            } else {
              let par = {
                ...this.menu,
                loginId: JSON.parse(localStorage.getItem('userInfo')).id
              }
              addPermissionInfo(par).then(response => {
                if (response.code == 200) {
                  this.$message({
                    message: '新增成功',
                    type: 'success',
                    duration: 1000
                  });
                  this.$emit('onSubmit');
                }

              });
            }
          });

        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          });
          return false;
        }
      });
    },
    // 关闭按钮
    clonsForm() {
      this.menu = {
        name: '',
        parentId: '',
        code: '',
        icon: '',
        status: 0,
        sort: 1,
        remarks: '',
        type: 0
      };
      this.$emit('clonsForm');
    },
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  display: flex;
  flex-wrap: wrap;



  .buttomData {
    width: 100% !important;
  }

  .el-form-item {
    width: 50%;

    .el-select {
      width: 100% !important;
    }
  }
}

.selectData {
  width: 300px;
  display: flex;
  flex-wrap: wrap;

  .el-scrollbar .el-select-dropdown__wrap .el-select-dropdown__list {
    width: 300px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
}
</style>
